<template>
	<div class="preview">
		<div class="preview_warp" :style="{'background-color': info.campaignBackgroundColor}">
			<el-image class="preview_warp_img" :src="info.campaignMainImageUrl" v-if="info.campaignMainImageUrl"></el-image>
			<el-image :src="info.campaignMyAwardBtnUrl" v-if="info.campaignMyAwardBtnUrl" class="foltTip"></el-image>
			<div class="card one">
				<div class="countdownColor" :style="{'background-color': info.campaignCountdownColor}"></div>
				<el-image :src="info.campaignExplainImageUrl" v-if="info.campaignExplainImageUrl" class="card_img"></el-image>
				<div class="card_one_action">
					<el-image :src="info.campaignSmallSendBtnUrl" v-if="info.campaignSmallSendBtnUrl" class="card_one_action_img"></el-image>
					<el-image :src="info.campaignSharePosterBtnUrl" v-if="info.campaignSharePosterBtnUrl" class="card_one_action_img"></el-image>
				</div>
			</div>
			<div class="card">
				<el-image :src="info.campaignAwardAreaImageUrl" v-if="info.campaignAwardAreaImageUrl" class="card_img"></el-image>
			</div>
			<div class="card">
				<el-image :src="info.campaignRankAreaUrl" class="card_img" v-if="info.campaignRankAreaUrl"></el-image>
				<div class="card_three_action">
					<el-image :src="info.campaignBigSendBtnUrl" v-if="info.campaignBigSendBtnUrl"></el-image>
				</div>
			</div>
			<div class="card">
				<el-image :src="info.campaignRuleAreaImageUrl" class="card_img" v-if="info.campaignRuleAreaImageUrl"></el-image>
			</div>
			<div class="card" v-if="info.campaignGetAwardAreaUrl">
				<el-image :src="info.campaignGetAwardAreaUrl" class="card_img"></el-image>
				<div class="card_address_action">
					<el-image :src="info.campaignWriteGetAwardAreaBtnUrl" v-if="info.campaignWriteGetAwardAreaBtnUrl"></el-image>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
    export default {
		name: "TEMPLATE_PREVIEW",
		props: {
			transData: {
				type: Object,
				default() {
					return {}
				}
			},
		},
		data() {
			return {
				info: this.transData || {}
			}
		},
		// watch: {
		// 	transData(newVal, oldVal) {
		// 		console.log(newVal, oldVal)
		// 		this.info = newVal
		// 	}
		// },
     	methods: {
			onPreviewPage() {
				this.$emit('ClosePreviewPage', false)
			},
			updateData() {
				this.info = { ...this.transData }
			}
      	},
  	}
</script>
<style lang="scss" scoped>
	.preview {
		&_warp {
			position: relative;
			width: 350px;
			margin: 0 auto;
			padding-bottom: 37px;
			&_img {
				position: relative;
				width: 100%;
			}
			.foltTip {
				position: absolute;
				z-index: 99;
				width: 65px;
				height: 26px;
				right: 0;
				top: 19px;
				text-align: center;
			}
			.card {
				position: relative;
				margin: 0 auto 11px;
				width: 320px;
				&.one {
					margin-top: -90px;
				}
				.countdownColor {
					position: absolute;
					top: -28px;
					left: 50%;
    				transform: translateX(-50%);
					width:320px;
					height:38px;
					background:rgba(172,221,121,1);
					border-radius:19px;
				}
				&_img {
					width: 100%;
				}
				&_one_action {
					width: 320px;
					position: absolute;
					bottom: 7px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					&_img {
						width: 160px;
						height: 62px;
					}
				}
				&_three_action {
					position: absolute;
					bottom: 11px;
					left: 50%;
    				transform: translateX(-50%);
					width: 308px;
					height: 62px;
				}
				&_address_action {
					position: absolute;
					bottom: 7px;
					left: 50%;
    				transform: translateX(-50%);
					width: 246px;
					height: 58px;
				}
			}
		}
	}
</style>
